<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" type="text/css">
    <style>
        body{
            padding: 20px;
        }
    </style>
</head>
<body>
    
        <form class="layui-form" lay-filter="formTest" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label class="layui-form-label">商品名称</label>
                <div class="layui-input-block">
                <input type="text" name="gname" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">价格</label>
                <div class="layui-input-block">
                <input type="text" name="price" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">上架</label>
                <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="Y|N" lay-filter="status"  value="yes" checked>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                <input type="text" name="description" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">库存</label>
                <div class="layui-input-block">
                <input type="text" name="stock" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">商品编号</label>
                <div class="layui-input-block">
                <input type="text" name="identifier" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">回收</label>
                <div class="layui-input-block">
                <input type="checkbox" name="recycle" lay-skin="switch" lay-text="Y|N" lay-filter="recycle"  value="no">
                </div>
            </div>

            <!-- <div class="layui-form-item">
                <label class="layui-form-label">商品分类</label>
                <div class="layui-input-block">
                <input type="text" name="cid" required  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div> -->
            <div class="layui-form-item">
                <label class="layui-form-label">商品分类id</label>
                <div class="layui-input-block">
                    <select name="cid" lay-verify="required">
                    <option value=""></option>
                    <option value="1">1(笔袋)</option>
                    <option value="2">2(笔)</option>
                    <option value="3">3(文具盒)</option>
                    <option value="4">4(笔记本)</option>
                    <option value="4">5(笔筒)</option>
                    <option value="6">6(本子)</option>
                    <option value="7">7(晨光)</option>
                    <option value="8">8(橡皮)</option>
                    <option value="9">9(文具用品)</option>
                    <option value="10">10(便利贴)</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">热销</label>
                <div class="layui-input-block">
                <input type="checkbox" name="is_best" lay-skin="switch" lay-text="Y|N" lay-filter="is_best" value="no" >
                </div>
            </div> 
            
            <div class="layui-form-item" style="padding-left: 40px;">
                <div class="layui-upload">
                    <input type="file" name="file-img" required  lay-verify="required" class="layui-input">
                </div>
              
            </div>
           
            <div class="layui-form-item">
                <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
    </form>

<script src="../../layui/layui.js"></script>
<script src="../../js/ajax.js"></script>
<script>

    layui.use(['form', 'upload', 'layer'], function(){
        var form = layui.form,
            upload = layui.upload,
            layer = layui.layer;
        //console.log(form)
        //监听锁定操作
        form.on('switch(status)', function(obj){
            this.value = this.checked ? 'yes' : 'no';
        });
        form.on('switch(recycle)', function(obj){
            this.value = this.checked ? 'yes' : 'no';
        });
        form.on('switch(is_best)', function(obj){
            this.value = this.checked ? 'yes' : 'no';
        });
            
        //监听提交
        form.on('submit(formDemo)', function(data){
            var data1 = form.val("formTest");
            // 获取开关value值
            var status = data.form.querySelector('input[name=status]').value,
                recycle = data.form.querySelector('input[name=recycle]').value,
                is_best = data.form.querySelector('input[name=is_best]').value;
            data.field.status = status;
            data.field.recycle = recycle;
            data.field.is_best = is_best;

            var file = new FormData(data.form); //file文件 php $_FILES 接收
            file.append('data', JSON.stringify(data.field));//参数, php 用$_POST['data']接收
            ajax({
                url: '../php/add-goods.php',
                data: file,
                method: 'post',
                file: true,
                success: function(res){
                    console.log(res)
                    if(res == 1){
                        layer.msg('添加商品成功');
                    }else if(res == 2){
                        layer.msg('文件格式错误');
                    }else if(res){
                        layer.msg('文件过大');
                    }
                    else{
                        layer.msg('添加商品失败, 请联系相关人员');
                    }
                }
            });
            
            return false;
        });
         
    });
    
</script>
</body>
</html>